<template>
  <el-dialog
    :title="translate('hycz')"
    :visible.sync="isShow"
    :before-close="closeDrawer"
    width="720px"
  >
    <!-- <div class="app-main-title">
      会员充值
      <div class="goback" @click="goBack">
        <i class="el-icon-refresh-left" /> {{translate('backPage')}}
      </div>
    </div> -->
    <div>
      <el-form
        ref="form"
        class="doumee-form"
        :model="param"
        :rules="rules"
        label-width="auto"
        label-suffix="："
      >
        <el-form-item :label="translate('memberInfo')" prop="memberId">
          <div style="width: 100%">
            <MemberSearch
              :placeholder="translate('hy2')"
              @clear="memberClear"
              @select="memberSelect"
            />
            <div v-if="memberInfo && memberInfo.nickName" class="member_info">
              <div class="item">
                {{ translate("name") }}：{{ memberInfo.nickName }}
              </div>
              <div class="item">
                {{ translate("phone") }}：{{ memberInfo.phone }}
              </div>
              <div class="item">
                {{ translate("hydj") }}：{{ memberInfo.cardName }}
              </div>
              <div class="item">
                {{ translate("czye") }}：<span>{{
                  memberInfo.rechargeMoney || 0
                }}</span>
              </div>
              <div class="item">
                {{ translate("zsye") }}：<span>{{
                  memberInfo.giveMoney || 0
                }}</span>
              </div>
            </div>
          </div>
        </el-form-item>
        <el-form-item
          v-if="moneys && moneys.length > 0"
          :label="translate('czje')"
          prop="realPrice"
        >
          <el-button
            v-for="(item, index) in moneys"
            :key="index"
            type="text"
            class="pay-style"
            :class="
              index == moneyIndex ? 'slelect-pay-style' : 'normal-pay-style'
            "
            @click="changeMoney(index)"
          >{{ item.name }}</el-button>
        </el-form-item>
        <el-form-item v-if="moneys && moneys.length > 0" prop="realPrice">
          <el-input
            v-model="param.realPrice"
            class="code-style"
            onkeyup="value=value.replace(/[^\d.]/g, '').replace(/\.{2,}/g, '.').replace('.', '$#$').replace(/\./g, '').replace('$#$', '.').replace(/^(\-)*(\d+)\.(\d\d).*$/, '$1$2.$3').replace(/^\./g, '')"
            :placeholder="translate('qsr')"
            style="width: 200px"
            @input="beginCustom"
          />
          <span class="ml10">{{ translate("rmb") }}</span>
          <div v-if="policyInfo && policyInfo.policyName" class="yhzc">
            {{ translate("yhzc") }}：<span>{{ policyInfo.policyName }}</span>
          </div>
        </el-form-item>
        <el-form-item
          v-if="!moneys || moneys.length == 0"
          :label="translate('czje')"
          prop="realPrice"
        >
          <el-input
            v-model="param.realPrice"
            class="code-style"
            onkeyup="value=value.replace(/[^\d.]/g, '').replace(/\.{2,}/g, '.').replace('.', '$#$').replace(/\./g, '').replace('$#$', '.').replace(/^(\-)*(\d+)\.(\d\d).*$/, '$1$2.$3').replace(/^\./g, '')"
            :placeholder="translate('qsr')"
            style="width: 200px"
            @change="beginCustom"
          />
          <span class="ml10">{{ translate("rmb") }}</span>
        </el-form-item>
        <el-form-item v-if="zsmoney" :label="translate('giveMoney')">
          <el-input
            v-model="param.giveMoney"
            placeholder="0.00"
            :disabled="!zsmoney"
            class="input-with-select"
            style="width: 200px"
            onkeyup="value=value.replace(/[^\d.]/g, '').replace(/\.{2,}/g, '.').replace('.', '$#$').replace(/\./g, '').replace('$#$', '.').replace(/^(\-)*(\d+)\.(\d\d).*$/, '$1$2.$3').replace(/^\./g, '')"
          />
          <span class="ml10">{{ translate("rmb") }}</span>
        </el-form-item>
        <el-form-item v-if="historyMoney" :label="translate('hyqy')">
          <div class="message-style">
            {{ translate("dqhyljcz") }}：
            <span class="price-style">
              {{ translate("renminbi") + historyMoney }}
            </span>
          </div>
          <div
            v-for="(item, index) in levelList"
            :key="index"
            class="message-style"
          >
            {{ translate("jxcz") }}：
            <span class="price-style">
              {{ translate("renminbi") + item.money }} </span>{{ translate("ksjw") }}【<span>{{ item.cardTypeName }}</span>】
          </div>
        </el-form-item>
        <el-form-item>
          <el-button
            v-preventReClick
            :loading="subLoading"
            type="primary"
            @click="onSubmit()"
          >{{ translate("subOrder") }}</el-button>
        </el-form-item>
      </el-form>
    </div>
    <!-- <orderDialog ref="child" @orderSuccess="orderSuccess" /> -->
  </el-dialog>
</template>

<script>
import store from '@/store'
import MemberSearch from '@/components/MemberSearch'
import { VIPInfo, memberRecharge, configList, memberLevelInfo, getPolicyInfo } from '@/api'
// import orderDialog from '@/components/order'
export default {
  name: 'VipRecharge',
  components: {
    MemberSearch
  },
  data() {
    return {
      isShow: false,
      memberInfo: {},
      policyInfo: {},
      modalDialog: store.getters.dialog,
      subLoading: false,
      meta: [],
      authCode: '',
      dialogTableVisible: false,
      cardNum: null,
      showMessage: false,
      cardMessage: {},
      moneyIndex: -1,
      moneys: [],
      customMoney: null,
      orderId: '',
      zsmoney: false,
      payType: '02',
      lessMoney: 0.00,
      payMoney: '',
      param: {},
      levelList: [],
      historyMoney: '',
      orderPrice: {},
      // 表单校验
      rules: {
        memberId: [
          { required: true, message: this.translate('qsr'), trigger: 'blur' }
        ],
        realPrice: [
          { required: true, message: this.translate('qsr'), trigger: 'blur' }
        ]
      }
    }
  },
  created() {
    this.meta = this.$route.meta.buttons || []
    this.getMoneys()
    configList({ param: { type: '6' }})
      .then((res) => {
        if (res.errorCode !== '000000') return
        const list = res.recordList
        const objb = list.find(item => item.code === 'PRESENT_MONEY_CONFIG')
        if (objb && objb.name) {
          this.zsmoney = true
        }
      })
      .catch((err) => {
        console.log(err)
      })
  },
  methods: {
    getPolicyInfo() {
      if (this.param && this.param.realPrice && this.memberInfo && this.memberInfo.id) {
        getPolicyInfo({ param: { cardTypeId: this.memberInfo.cardTypeId, money: this.param.realPrice, orderType: '01' }})
          .then(res => {
            if (res.errorCode === '000000') {
              this.policyInfo = res.record || {}
            } else {
              this.policyInfo = {}
            }
          }).catch(_ => {
            this.policyInfo = {}
          })
      } else {
        this.policyInfo = {}
      }
    },
    getMoneys() {
      configList({ param: { type: '5' }})
        .then(res => {
          this.moneys = res.recordList
          if (this.moneys.length > 0) {
            this.$set(this.param, 'realPrice', this.moneys[0].name)
            this.moneyIndex = 0
          }
        })
    },
    orderSuccess() {
      this.closeDrawer()
      this.$emit('success')
    },
    closeDrawer() {
      this.isShow = false
      this.$emit('close')
    },
    changeMoney(index) {
      this.$set(this.param, 'realPrice', this.moneys[index].name)
      this.moneyIndex = index
      this.getPolicyInfo()
    },
    submitCode() {
      return false
    },
    memberSelect(item) {
      this.memberInfo = item
      this.$set(this.param, 'memberId', item.id)
      this.$refs.form.clearValidate()
      this.getLevelMessage(item.id)
      this.getPolicyInfo()
    },
    memberClear() {
      this.memberInfo = {}
      this.param.memberId = ''
      this.showMessage = false
      this.cardMessage = {}
      this.historyMoney = ''
      this.param.cardNum = ''
      this.param.id = ''
      this.getPolicyInfo()
    },
    goBack() {
      this.$router.go(-1)
    },
    handleClose(done) {
      this.$confirm(this.translate('qrgb'))
        .then(_ => {
          this.payType = '02'
          done()
        })
        .catch(_ => { })
    },
    changePayType(index) {
      if (this.payType === index) {
        return
      }
      this.payType = index
      this.getOrderPrice()
    },
    payByMoney() {
      if (!this.payMoney) {
        this.lessMoney = 0.00
        return
      }
      if (this.payMoney.length === 1 && [1, 2, 3, 4, 5, 6, 7, 8, 9].indexOf(Number(this.payMoney)) === -1) {
        this.payMoney = ''
        this.lessMoney = 0.00
        return
      }
      // console.log(this.payMoney)
      this.lessMoney = parseFloat(this.payMoney) - parseFloat(this.realPrice)
    },
    onSubmit() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          const param = {
            venueId: sessionStorage.getItem('venueId'),
            memberId: this.param.memberId,
            money: this.param.realPrice,
            giveMoney: this.param.giveMoney
          }
          this.subLoading = true
          memberRecharge({ param })
            .then(res => {
              // console.log(res)
              this.subLoading = false
              if (res.errorCode === '000000') {
                const obj = {
                  ...this.memberInfo,
                  allPrice: this.param.realPrice,
                  giveMoney: this.param.giveMoney,
                  orderId: res.record,
                  memberId: this.param.memberId
                }
                console.log('obj', obj)
                this.$refs.child.continuePay(obj, 'vipRecharge')
                // this.dialogTableVisible = true
                // this.orderId = res.record
                // this.getOrderPrice()
              }
            }).catch(err => {
              this.subLoading = false
              console.log(err)
            })
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    beginCustom() {
      this.moneyIndex = -1
      this.getPolicyInfo()
    },
    searchAction() {
      // console.log('搜索会员卡')
      if (!this.param.cardNum.length) {
        this.$message.error(this.translate('hy3'))
        return
      }
      VIPInfo({
        param: {
          phoneOrNo: this.param.cardNum
        }
      })
        .then(res => {
          // console.log(res)
          if (res.errorCode === '000000') {
            this.cardMessage = res.record
            this.showMessage = true
            this.$set(this.param, 'id', this.cardMessage.id)
            this.getPolicyInfo()
            this.$refs.form.clearValidate()
          }
        }).catch(err => {
          console.log(err)
          this.cardMessage = {}
          this.showMessage = false
          this.param.id = ''
        })
    },
    getLevelMessage(memberId) {
      memberLevelInfo({ param: { memberId }})
        .then(res => {
          // console.log('权益信息', res)
          if (res.errorCode === '000000') {
            this.levelList = res.record.items
            this.historyMoney = res.record.totalMoney
          }
        })
    }
  }
}
</script>

<style lang="scss" scoped>
@import "@/styles/variables.scss";
.member_info {
  display: flex;
  flex-wrap: wrap;
  background: #f7f7f7;
  border-radius: 2px;
  padding: 16px;
  margin-top: 10px;
  .item {
    width: 50%;
    line-height: 28px;
    height: 28px;
  }
}
.pay-style {
  min-width: 80px;
  padding-left: 5px;
  padding-right: 5px;
  height: 30px;
  font-size: 15px;
  line-height: 1px;
  vertical-align: middle;
}
.slelect-pay-style {
  background-color: #1943a9;
  color: #fff;
}
.normal-pay-style {
  border: 1px solid #d8d8d8;
  background-color: #fff;
  color: #222;
}

.message-style {
  color: #999;
  .price-style {
    color: #dd0707;
  }
}

.money-value-style {
  color: #dd0707;
  font-weight: 500;
}

.base-message-style {
  width: 50%;
  display: inline-block;
  .base-value-style {
    font-size: 13px;
  }
  .card-name-style {
    display: inline-block;
    border: 1px #999 solid;
    border-radius: 4px;
    background-color: #fff;
    font-size: 12px;
    padding-left: 5px;
    padding-right: 5px;
    height: 20px;
    line-height: 20px;
    margin-top: 10px;
    padding-bottom: -15px;
    text-align: center;
  }
}
.btns-style {
  width: 80%;
  margin-left: 10%;
}
.footer-style {
  display: flex;
  justify-content: space-between;
  background-color: #f2f2f2;
  margin: -10px -20px -30px;
  height: 50px;
  // .bottom-left {
  //   margin-left: 20px;
  //   height: 20px;
  //   margin-top: 15px;
  //   .sum-title-style {
  //     font-size: 15px;
  //     color: #222;
  //   }
  //   .sum-pay-value-style {
  //     font-size: 17px;
  //     font-weight: 500;
  //     color: #DD0707;
  //   }
  //   .dis-title-style {
  //     font-size: 14px;
  //     color: #222;
  //   }
  //   .discoun-style {
  //     font-size: 16px;
  //     color: #DD0707;
  //   }
  // }
  .bottom-right {
    margin-right: 20px;
    margin-top: 10px;
    height: 30px;
    .pay-action-style {
      width: 100px;
      height: 30px;
      font-size: 15px;
      line-height: 1px;
      vertical-align: middle;
    }
  }
}
.yhzc {
  font-size: 13px;
  line-height: 36px;
  padding: 0 9px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #222222;
  height: 36px;
  background: rgba(238, 56, 33, 0.06);
  margin: 10px 0;

  span {
    color: #ee3821;
  }
}
</style>
